{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">

<title>10086购票系统</title>
	<style>
		.Home_page
		{
			position:relative;
			height:300px;
			margin:0px 0px 0px 0px;
			width:100%
		}
        .parent li
        {
            float: left;
            width: 1700px;
            height: 100%;
        }
	</style>
    <link rel="stylesheet" type="text/css" href="{% static 'tickets/CSS/Initial.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'tickets/CSS/Carousel.css' %}">
</head>

<body >
    <div class="top">
		<div class="top_picture"  align="center" >
			<img src="{% static 'tickets/images/12306.png' %}" style="width: 100%;height:100%;" alt="Logo">
		</div>
        {% if user_get %} 
            <div class="login_block">
                已登录：{{ user_get.user_name }}<br/>
            </div>
            <div style="position: absolute; top: 5%; right: 8%">
                <img src="{% static 'tickets/images/head/' %}{{ user_get.user_head }}"
                style="position: relative; width: 50px; height: 50px; border-radius: 50%">
            </div>
        {% else %}
            <div class="login_block">
                <ul>
                    <li><a href="{% url 'tickets:login' %}">登录</a></li>
                    <li><a href="{% url 'tickets:login' %}">注册</a></li>
                </ul>
            </div>
        {% endif %}
    </div>

	<div class="nav" align="center">
        <ul>
            <li class="selected"><a href="{% url 'tickets:home' %}">首页</a></li>
            <li><a href="{% url 'tickets:guide' %}">出行指南</a></li>
            <li><a href="{% url 'tickets:personal_info' %}">个人信息</a></li>
            <!--<li><a href="{% url 'tickets:guide' %}">购票规则</a></li>-->
        </ul>
	</div>

    <div class="container" style="width:1538px;" align="left">
        <ul class="parent" style="left:0px;width:8500px;">
            <li><img src="https://www.12306.cn/index/images/pic/banner0619.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner10.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner12.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner20200707.jpg"></li>
            <li><img src="https://www.12306.cn/index/images/pic/banner20201223.jpg"></li>
        </ul>

        <div class="btnLeft">&lt;</div>
        <div class="btnRight">&gt;</div>
        <div class="modal">
            <div class="dots">
                <ul class="clearfix">
                    <li class="on"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                </ul>
            </div>
        </div>
        <div class="input_search">
            <!-- <img src="图片/0.png" id="GIF" height="100%" width="100%" style="z-index=8888">-->
            <!--发送数据接口-->
            <form action="/tickets/query" method="POST">
                {% csrf_token %}
                <div align="center">
                <br><br><br>
                <b><font size="4" style="color:greenyellow">出发站：	</font></b>
                <input type="text" name="station_start" value="" >
                <br><br>
                <b><font size="4" style="color:greenyellow">终点站：	</font></b>
                <input type="text" name="station_arriv" value="" >
                <br><br>
                <b><font size="4" style="position:relative; right: 12px; color:greenyellow">时间:</font></b>
                <input type="date" style="width: 125px;" id="train_time" name="tran_date">
                <br><br><br>
                <button style="width: 100px;" class="btn">查询</button>
            </form>
        </div>
	</div>

<script type="text/javascript">
        var date = new Date();
		var dateString;
		if(date.getMonth()<10)
        if(date.getDay()<10)
            dateString = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-0" + date.getDate();
        else
            dateString = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-" + date.getDate();
		else
        {
            if(date.getDay()<10)
                dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-0" + date.getDate();
            else
                dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        }
        
       	document.getElementById("train_time").value=dateString;

var imgShow = document.getElementsByClassName('parent')[0],
	dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
    btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
	index = 0; //轮播层的图片索引，0表示第一张

//圆点显示
function showRadius() {
	for(var i = 0; i < dotLen; i++) {
		if(dotList[i].className === "on"){
			dotList[i].className = "off";
		}
	}
	index++;
	if(index===5)
	index=0;
	dotList[index].className = "on";

}
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

function animate(element,distance){
        clearInterval(element.timer)
        element.timer=setInterval(function(){
             var present=parseInt(element.style.left);//获取元素的当前的位置
             var movement=50;//每次移动的距离
             movement=present<distance?movement:-movement;    
             present+=movement;//当前移动到位置
             if(Math.abs(present-distance)>Math.abs(movement)){
                 element.style.left=present+"px"
             }else{
                 clearInterval(element.timer);
                 element.style.left=distance+"px"			
             }
			 //调试
			 /*console.log("movement="+movement);
			 console.log("distance="+distance);
			 console.log("present="+present);*/
        },10);
}

// 自动轮播
var timer;
function autoPlay() {
	timer = setInterval(function() {
		var right;
		var imgLeft = imgShow.style.left;
		var Left_int=parseInt(imgLeft);
		var yu=Left_int % 1700;
		Left_int=Left_int-yu;
		console.log("Left_int="+Left_int);
		if(Left_int<=-6800)
		{
			right = 0;
			imgShow.style.left = right + "px";
		}
		/*if(imgLeft === "-6000px") {
			right = 0;
			imgShow.style.left = right + "px";
		}*/
		else{
			right = Left_int - 1700;
			/*right = parseInt(imgLeft);
			for(var j=0;j<15;j++)
			{
			right=right-100;
			imgShow.style.left = right + "px";
			
			}*/
			animate(imgShow,right);
			console.log("right="+right);
			//animate(imgShow,right);
		}
		//imgShow.style.left = right + "px";
		//$("#img").animate({left: imgLeft});
		
		
	showRadius();
	} ,4000)
}
autoPlay();

for(var i = 0; i < dotLen; i++) {
    //利用闭包传递索引
    (function(i) {
        dotList[i].onclick = function() {
	        var dis = index - i; //当前位置和点击的距离
	        imgShow.style.left = (parseInt(imgShow.style.left) + dis * 1700) + "px";
	        index = i; //显示当前位置的圆点
			index--;
	        showRadius();
    	}
    })(i);
}
function Sleep() {
time = setInterval(function(){},6000);
autoPlay();}
var mutex=0;
function animate2(element,distance){
	if(mutex===0){
		mutex=1;
        clearInterval(element.timer)
        element.timer=setInterval(function(){
             var present=parseInt(element.style.left);//获取元素的当前的位置
             var movement=50;//每次移动的距离
             movement=present<distance?movement:-movement;    
             present+=movement;//当前移动到位置
             if(Math.abs(present-distance)>Math.abs(movement)){
                 element.style.left=present+"px"
             }else{
                 clearInterval(element.timer);
                 element.style.left=distance+"px"
				 mutex=0;
             }
			 //调试
			 /*console.log("movement="+movement);
			 console.log("distance="+distance);
			 console.log("present="+present);*/
        },10);
		
		//console.log(present);
	}
    }
//向左移动
btnLeft.onclick = function() {
	index--;
	
    if(index < 0){  /*第1张向左时，变为第5张*/
        index = 4;
    }
    index--;
    showRadius();
	var left;
	var imgLeft = imgShow.style.left;
	if(imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*1500)*/
		left = -6800;
		imgShow.style.left = left + "px";
	}
	else{
		left=-1700*index; /*由于left为负数，每左移一张加1500*/
		animate2(imgShow,left);
	}
	clearInterval(timer);
	Sleep();
	clearInterval(time);
	//autoPlay();
}

//向右移动
btnRight.onclick = function() {
	index++;
    if(index > 4){  /*第5张向右时，变为第1张*/
        index = 0;
    }
    index--;
    showRadius();
	var right;
	var imgLeft = imgShow.style.left;
	if(imgLeft === "-6800px") { /*当是第5张时，第1张的位置为0*/
		right = 0;
		imgShow.style.left = right + "px";
	}
	else{
		//right = parseInt(imgLeft) - 1500; /*由于left为负数，每右移一张减1500*/
		right=-1700*index;
		animate2(imgShow,right);
	}
	clearInterval(timer);
	Sleep();
	clearInterval(time);
}
</script>

</body>
</html>